<template> 
	<div class="container">
		<router-link tag="div"  class="header-abs" to="/" v-show="showAbs">
			<span class="iconfont" >&#xe616;</span>
		</router-link>

		<router-link class="header-fixed" to="/" tag="div" :style="opacityStyle" v-show="!showAbs">
			景点详情
		</router-link>	
	</div>
</template> 

<script> 
	export default { 
		name:"DetailHeader",
		data () { 
			return { 
				showAbs:true,
				opacityStyle:{
					opacity:0
				}
			}; 
		}, 

		methods: { 
			handleScroll(){
				const top=document.documentElement.scrollTop;
				console.log(top)
				if(top>60){
					let opacity=top/140;
					opacity=opacity>1?1:opacity;
					this.opacityStyle={opacity};
					this.showAbs=false
				}else{
					this.showAbs=true
				}
			}
		},
		mounted(){
			window.addEventListener('scroll',this.handleScroll)
		},
		unactivated(){
			window.removeEventListener('scroll',this.handleScroll)
		}


	}; 
</script> 

<style scoped> 
.container{
	width: 100%
}

.header-abs{
	position: absolute;
	width: 50px;
	height: 50px;
	background: rgba(66,66,66,.7);
	border-radius: 25px;
	top: 10px;
	left: 20px;
	display: flex;
	justify-content: center;
	align-items: center;
}
.header-fixed{
	position: fixed;
	z-index: 3;
	left: 0px;
	top: 0px;
	bottom: 0px;
	right: 0px;
	background: rgb(0,188,212);
	width: 100%;
	height: 50px;
	display: flex;
	justify-content: center;
	align-items: center;
	color: white;
}
.iconfont{
	color: white;
}
</style> 